<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="b in shopname" :label="b.name" v-bind:key="b.id" :name="b.id">
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              fixed
              prop="outTradeNo"
              label="商品货号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="shopname"
              label="商品名字"
              width="150">
          </el-table-column>
          <el-table-column
              prop="status"
              label="是否存活"
              width="150">
          </el-table-column>
          <el-table-column
              prop="num"
              label="商品数量"
              width="150">
          </el-table-column>
          <el-table-column
              prop="price"
              label="商品单价"
              width="200">
          </el-table-column>
          <el-table-column
              prop="creatTime"
              label="上架时间"
              width="200">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="300">
            <template slot-scope="scope">
              <el-button @click="openbuy(scope.row)" type="text" size="small">购出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-pagination
        @current-change="gopage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>


    <el-dialog title="购买商品" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="购买数量" :label-width="formLabelWidth">
          <el-input-number v-model="form.num" @change="handleChange" :min="0" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="buy">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "ShopView",
  data() {
    return {
      tableData:[],
      pageNum:1,
      total:0,
      dialogFormVisible:false,
      formLabelWidth:"120px",
      form:{},
      xn:'',
      shopname:[]
    }
  }, methods: {
    gopage(page){
      this.pageNum=page;
      this.handleClick();
    },
    handleClick(){
      this.axios.post("flowservice/supermarket/list?pageNum="+this.pageNum+"&activeName="+this.activeName).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    openbuy(row){
      this.xn=row.id;
      this.form={};
      this.dialogFormVisible=true;
    },
    buy(){
      this.axios.post("flowservice/supermarket/buy?num="+this.form.num+"&id="+this.xn).then(res=>{
        if(res.data.code==200){
          this.$message.success("购出成功");
          this.dialogFormVisible=false;
          this.handleClick();
        }else{
          this.$message.error(res.data.msg);
          this.dialogFormVisible=false;
          this.handleClick();
        }
      })
    },
    getshopname(){
      this.axios.post("flowservice/shop/getshopname").then(res=>{
        this.shopname=res.data.data;
      })
    }
  }, created() {
    this.getshopname();
    this.handleClick();
  }
}
</script>

<style scoped>

</style>
